{extend name="common:base" /}

{block name="title"}{$config.site_name}{/block}

{block name="css"}
<link href="/static/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
{/block}

{block name="main"}
<div class="mdui-container">
  <main>
    {if (bool) $config.allowed_tourist_upload or $user}
    <div class="upload-container">
      <div class="title">
        <h1>Image Upload</h1>
        <p>最大可上传 {:round($config.upload_max_size / 1024 / 1024)} MB的图片，单次同时可选择 {$config.upload_single_num} 张。本站已托管 {$images_count} 张图片。</p>
      </div>
      <form action="" method="post" enctype="multipart/form-data">
        <input id="image" style="display: none;" type="file" multiple name="image" accept="image/*">
      </form>
      <div class="success-info">
        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#code-url" class="mdui-ripple mdui-tab-active">URL</a>
          <a href="#code-html" class="mdui-ripple">HTML</a>
          <a href="#code-bbcode" class="mdui-ripple">BBCode</a>
          <a href="#code-markdown" class="mdui-ripple">Markdown</a>
          <a href="#code-markdown-with-link" class="mdui-ripple">Markdown with link</a>
        </div>
        <div id="code-url"><ul></ul></div>
        <div id="code-html"><ul></ul></div>
        <div id="code-bbcode"><ul></ul></div>
        <div id="code-markdown"><ul></ul></div>
        <div id="code-markdown-with-link"><ul></ul></div>
      </div>
    </div>
    {else /}
    <div class="not-logged-in jumbotron">
      <h2>请登录后体验</h2>
      <a href="{:url('auth/login')}" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-cyan mdui-text-color-white">登录</a>
      <a href="{:url('auth/register')}" class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-green mdui-text-color-white">注册</a>
    </div>
    {/if}
  </main>
</div>
{/block}
{block name="js"}
<script src="/static/clipboard.js/2.0.1/clipboard.min.js"></script>
<script src="/static/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
<script src="/static/bootstrap-fileinput/4.5.1/js/locales/zh.js"></script>
<script src="/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  var clipboard = new ClipboardJS('.copy', {
    text: function(trigger) {
      return $(trigger).parent('li').text();
    }
  });

  clipboard.on('success', function(e) {
    app.msg(true, '复制成功');
  });

  clipboard.on('error', function(e) {
    app.msg(false, '复制失败');
  });

  $("#image").fileinput({
    uploadUrl: "{:url('upload/upload')}",
    language: "zh",
    uploadAsync: true,
    overwriteInitial: false,
    //browseClass: "btn btn-file",
    maxFileSize: "{$config.upload_max_size / 1024}",// kb
    maxFileCount: "{$config.upload_single_num}",
    showCaption: true,
    dropZoneEnabled: true,
    browseIcon: "<i class=\"glyphicon glyphicon-picture\"></i> ",
    allowedFileExtensions: JSON.parse('{:json_encode(explode(",", filter_comma($config.upload_allowed_exts)))}'),
  }).on("fileuploaded", function(event, data, previewId, index) {
    var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;
    if(200 === response.code) {
      $("#code-url ul").prepend("<li>" + response.data.url + "<i class=\"copy iconfont icon-copy\"></i></li>");
      $("#code-html ul").prepend("<li>&lt;img src=\"" + response.data.url + "\" alt=\"" + response.data.name + "\" title=\"" + response.data.name + "\" /&gt;<i class=\"copy iconfont icon-copy\"></i></li>");
      $("#code-bbcode ul").prepend("<li>[img]" + response.data.url + "[/img]<i class=\"copy iconfont icon-copy\"></i></li>");
      $("#code-markdown ul").prepend("<li>![" + response.data.name + "](" + response.data.url + ")<i class=\"copy iconfont icon-copy\"></i></li>");
      $("#code-markdown-with-link ul").prepend("<li>[![" + response.data.name + "](" + response.data.url + ")](" + response.data.url + ")<i class=\"copy iconfont icon-copy\"></i></li>");
      $(".success-info").css("width", "inherit").css('display', 'block');
      if (response.data.quota && response.data.use_quota) {
        $('.quota-container progress').attr('max', response.data.quota);
        $('.quota-container progress').val(response.data.use_quota);
        $('.quota-container span.quota').text(app.bytesToSize(response.data.quota));
        $('.quota-container span.use-quota').text(app.bytesToSize(response.data.use_quota));
      }
    } else if (500 === response.code) {
      mdui.alert(response.msg, '发生异常');
    } else {
      mdui.alert(response.msg);
    }
  }).on("filecleared", function (event, data, msg) {
    // 清空
    $('.success-info')
      .css('display', 'none')
      .find('#code-url, #code-html, #code-bbcode, #code-markdown, #code-markdown-with-link')
      .find('ul')
      .html('');
  });
  $('#image').css("display", "block");
</script>
{/block}
